<template>
    <div class="container">
        <div class="fixed-box fixed-box-fixed">
          <div class="btn-box flex">
            <div @click="cancelSave">取消</div>
            <div>
              <button @click="saveData">确认移除<template v-if="checkedList.length !== 0">({{checkedList.length}})</template></button>
            </div>
          </div>
          <div class="flex header-box" :class="{'search-icon-none': checkedList.length > 0}">
            <div class="headshop-box">
                <div class="flex img-row">
                    <div v-for="item in checkedList" :key="item" class="img-box">
                        <div v-if="item.checked">
                            <img v-if="item.avatar && item.checked" class="width-35 height-35" :src="item.avatar" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="search-box">
                <van-search
                    v-model="listQuery.nickname"
                    placeholder="搜索昵称/手机号"
                    clearable="false"
                    @search="onSearch"
                    placeholder-style='font-size:13px;color:#999999;'
                    >
                </van-search>
            </div>
          </div>
        </div>
        <div class="height-100"></div>        
        <div class="customer-title">
            <div>我的{{appInfo.memberShareAlias || '分销商'}}<span v-if="listData.length !== 0" class="mar-l-9">({{ listData.length }})</span></div>
        </div>
        <div class="pull-refresh">
            <div class="content-list" v-if="!dataNone">
                <div class="list-row"
                  v-for="(item,index) in listData" :key="index" @click="checkClick(index, $event)">
                  <van-checkbox :value="item.checked" checked-color="#f84545"></van-checkbox>
                  <div class="self-cell-box">
                    <div class="self-cell">
                      <img v-if="item.avatar" :src="item.avatar"/>
                      <div class="nickname">{{item.nickname}}</div>
                    </div>
                  </div>
                </div>
                <base-line v-if="pullLoad.finished && listQuery.currentPage !== 1"  title='我是有底线滴'></base-line>
            </div>
            <div class="pad-10 mar-t-10 align-c" v-else>
                <img v-if="fileSpace" mode="widthFix" class="width-247.5 height-193.5 mar-t-30"
                    :src="fileSpace + '/images/customer-nodata.png'"/>
                <div class="pad-t-22 font-18 font-gray">暂无顾客数据~</div>
            </div>
        </div>
    </div>
</template>
<script>
import { selectPageShare, deletebatch } from '@/api/personal'
import baseLine from '@/components/BaseLine/index'
export default {
  components: { baseLine },
  data() {
    return {
      value: '',
      showSaveDialog: false,
      showGoSaveDialog: false,
      tabsRow: false, // 用于固定头部
      checkedList: [],
      customerTotal: 0,
      labelGroupId: null,
      resParams: {
        memberId: '',
        labelGroupId: null,
        nickname: ''
      },
      currentPage: 1,
      listQuery: {
        currentPage: 1,
        size: 10,
        memberId: '',
        searchType: '',
        nickname: ''
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      dataNone: false,
      listData: [],
      appInfo: {}
    }
  },
  onLoad() {
    // 重置缓存data里面的数据
    // Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    Object.assign(this.$data, this.$options.data())
    this.appInfo = this.$pt.getStorageSync('appInfo')
    this.listData = []
    this.currentPage = 1
    this.pullLoad.finished = false
    this.listEls()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.listEls()
    }
  },
  methods: {
    listEls() {
      this.listQuery.currentPage = this.currentPage
      this.listQuery.memberId = this.getCustomerId
      selectPageShare(this.listQuery).then((response) => {
        if (response.isError) return
        this.dataNone = false
        if (response.isError) return
        response.data.records.forEach(item => {
          if (item.createTime) {
            item.createTime = item.createTime.substring(0, 10)
          }
          this.listData.push(item)
        })
        this.currentPage++
        if (this.listQuery.currentPage === response.data.pages) {
          this.pullLoad.finished = true
        }
        if (response.data.records.length === 0) {
          this.dataNone = true
        }
      }).catch(() => {
      })
    },
    onSearch(e) {
      this.listQuery.nickname = e.mp.detail
      this.listData = []
      this.currentPage = 1
      this.pullLoad.finished = false
      this.listEls()
    },
    checkClick(index, e) {
      this.listData[index].checked = !this.listData[index].checked
      if (this.listData[index].checked) {
        this.checkedList.push(this.listData[index])
      } else {
        for (let i = 0; i < this.checkedList.length; i++) {
          if (this.checkedList[i].shareMemberId === this.listData[index].shareMemberId) {
            this.checkedList.splice(i, 1)
          }
        }
      }
      const changeData = this.listData[index].checked
      this.$delete(this.listData[index], 'checked')
      this.$set(this.listData[index], 'checked', changeData)
      // console.log('选中的数据', this.checkedList)
    },
    cancelSave() {
      const that = this
      this.$pt.showModal({
        content: '您将离开本页面,是否保存当前设置?',
        cancelText: '取消',
        confirmText: '保存',
        success(res) {
          if (res.confirm) {
            that.saveEls()
          } else if (res.cancel) {
            that.$pt.navigateBack({delta: -1})
          }
        }
      })
    },
    saveData() {
      if (this.checkedList.length <= 0) return
      const that = this
      this.$pt.showModal({
        content: '是否确认移除当前选择的分销商？',
        success(res) {
          if (res.confirm) {
            that.saveEls()
          }
        }
      })
    },
    saveEls() {
      // 发送请求 新增顾客
      if (this.checkedList.length === 0) {
        this.$pt.navigateBack({delta: -1})
        return
      }
      let customerMemberIds = this.checkedList.map(item => {
        return item.shareMemberId
      })
      let params = {
        memberId: this.getCustomerId,
        customerMemberIds: customerMemberIds.join(',')
      }
      deletebatch(params).then(response => {
        if (response.isError) return
        this.$pt.navigateBack({delta: -1})
      }).catch({})
    }
  }
}
</script>
<style lang="less" scoped>
.container{
    background: white;
    min-height: calc(100vh);
}
.fixed-box{
    top: 0;
    left: 0;
    height: 100x;
    width: 100%;
    background: white;
    z-index: 99;    
}
.btn-box{
        padding: 0 15px;
        height: 49px;
        font-size: 14px;
        font-weight: bold;
        justify-content: space-between;
        align-items: center;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
        button{
          background: #f84545;
          line-height: 1;
          font-size: 14px;
          padding: 6px 10px;
          border-radius: 1em;
          color: #fff;
          &::after{
              border: unset;
          }
        }
    }
    .header-box{
        padding: 0 15px;
        justify-content: left;
        align-items: center;
        height: 49px;
        /deep/ .van-search{
            background: white !important;
            padding: 0px;
            // min-width: 80px;
        }
        /deep/ .van-cell--borderless{
            padding: 3px 10px 3px 0px !important;
        }
        /deep/ .van-field__body{
            margin-left: 10px;
        }
        .headshop-box{
            max-width: 240px;
            display: inline-block;
            .img-row{
                overflow-x: auto;
                .img-box{
                    &:first-child{
                        img{
                            margin-left: 0px;
                        }
                    }
                    img{
                        // flex-basis: 35px;
                        flex-shrink: 0;
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        margin-left: 10px;
                    }
                }
            }
        }
        .search-box{
            display: inline-block;
            width: 100%;
        }
    }
.fixed-box-fixed{
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 1px 1px rgba(229, 229, 229, 0.3);
}
.customer-title{
    font-size: 13px;
    padding: 0 15px;
    height: 35px;
    line-height: 35px;
    background: #fafafa;
}
.content-list{
    .list-row{
        height: 50px;
        position: relative;
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 0 15px;
        &::after{
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: calc(100% - 95px);
            border-bottom: 1px solid #ededed;
        }
        // /deep/ .van-checkbox{
        //     .van-checkbox__icon-wrap{
        //         padding-left: 15px;
        //     }
        //     .van-checkbox__label{
        //         width: 88%;
        //     }
        // }
        // /deep/ .van-radio__label{
        //     margin-left: 13px;
        // }
        .self-cell-box{
            width: 100%;
            .self-cell{
                margin-left: 13px;
                margin-top: 5px;
                height: 45px;
                display: flex;
                justify-content: left;
                align-items: center;
                img{
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    margin-right: 12px;
                }
                .nickname{
                    font-size: 15px;
                    color: #333333;
                    width: calc(100% - 47px);
                    height: 44px;
                    line-height: 44px;
                    // border-bottom: 1px solid #ededed;
                }
            }
        }
    }
}
.show-dialog{
    /deep/ .van-popup{
        top: 205px;
    }
    /deep/ .van-dialog__header{
        font-size: 18px;
        color: #333333;
        font-weight: bold;
        line-height: 1.3;
        padding-top: 36px;
        padding-bottom: 31px;
        width: 235px;
        margin: 0 auto;
    }
}
.search-icon-none{
    /deep/ .van-icon-search {
        &::before{
            content: unset;
        }
    }
}
</style>
